<script setup lang="ts">
import { URL_ABNORMAL_TOP_HOT } from "@/comm/api";
import { onMounted, computed, ref, watch } from "vue";
import { ABNORMAL_TOP, HOT, tabKeys, page, commFun, TabType } from "./scripts/tabList";
import { get } from "@/comm/request";
import Empty from "@/components/j-empty/index.vue";
import JLoding from "@/components/j-loding/index.vue";
import jString from "@/components/j-string/index.vue";
import jNumber from "@/components/j-number/index.vue";
import i18n from "@/locals";
import { formatBigNumber } from "@/comm/format";
// const navs = ['名称', '从', '到', '金额', '时间'];
const nvas = [
    "#",
    i18n.global.t("message.TabD.a"),
    // i18n.global.t('message.TabD.b'),
    i18n.global.t("message.TabD.c"),
    i18n.global.t("message.TabD.d")
];

const loding = ref(true);

const sum = page.sum; //10
const idx = ref(1);
const key = ref(tabKeys.tab4_key);
const listArr_ = computed(() => ListArr.value.slice((idx.value - 1) * sum, idx.value * sum));
const ListArr = ref<HOT[]>([]);
const getdate = async function () {
    loding.value = true;

    const res: ABNORMAL_TOP<HOT> = await get(URL_ABNORMAL_TOP_HOT, { periodType: key.value.value });

    if (res.success) {
        ListArr.value = [];
        setTimeout(() => {
            loding.value = false;
            ListArr.value = res.data;
            idx.value = 1;
        }, 500);
        // console.log('yzt 数据异动表格4求回的数据', res);
    } else {
        loding.value = false;
        console.log("yzt 数据异动表格4请求错误", res);
    }
};

watch(key, () => getdate());
onMounted(() => getdate());
</script>

<template>
    <JLoding v-if="loding"></JLoding>
    <div class="tab">
        <VRow class="nvas c-title-5 px-5">
            <VCol v-for="(item, idx) in nvas" :cols="commFun.getIdx(TabType.TabD, idx)" :class="`col${idx}`">
                {{ item }}
            </VCol>
        </VRow>
        <div class="bdy">
            <Empty v-if="listArr_.length === 0"></Empty>
            <VRow class="c-title-4 px-5" v-for="(item, idx_) in listArr_">
                <VCol :cols="commFun.getIdx(TabType.TabD, 0)" class="col0">
                    <span style="width: 15px; color: var(--color)">{{ idx_ + 1 }}</span>
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabD, 1)" class="col1 d-flex">
                    <img :src="commFun.getIconByHash(item.baseToken)" class="mr-2" />
                    <span class="y-link" @click="commFun.openToken(item.baseToken)"><jString :text="item.symbol" bold></jString></span>&nbsp;&nbsp;
                    <jString :text="item.name" color="var(--color)"></jString>
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabD, 2)" class="col2" :style="{ color: item.priceChangeH1 > 0 ? 'var(--win)' : 'var(--lose)' }">
                    <jNumber :notbold="true" :num="key.value === 'H' ? item.priceChangeH1 : item.priceChangeH24" :origin="true" :suffix="'%'" :is-color="true"></jNumber>
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabD, 3)" class="col3">
                    <jNumber :num="item.volumeUsdH24" price :origin="true" prefix="$"></jNumber>
                </VCol>
            </VRow>
        </div>
        <!-- <v-pagination class="" :length="Math.ceil(ListArr.length / sum)" :total-visible="3" v-model="idx"></v-pagination> -->
    </div>
</template>

<style lang="less" scoped>
.v-col:last-child {
    text-align: right;
}

.bdy {
    margin-top: 13px;
    height: 470px !important;
    // background-color: blue;
    .v-row {
        height: 45px;
    }
}

.col1 {
    // width: 40%;
    overflow: hidden;
    // border: solid 1px #f0f0f0;
}

.col2 {
    margin-left: 20px;
    text-align: right;
    // border: solid 1px #8f5252;
}

// .col3{
//     width: 30%;
//     border: solid 1px #f0f0f0;
// }
</style>
